<template>
  <div class="ser-table">
    <div class="header-box" style="background: #fff">
      <div style="float: right; margin-right: 20px">
        <div class="search-btn" @click="btnClick('back')">
          <img
            src="../images/back.png"
            style="
              width: 16px;
              height: 16px;
              display: block;
              margin-top: 7px;
              margin-right: 4px;
            "
          />
          <span style="color: #333333">返回</span>
        </div>
      </div>
      <div class="search" style="display: flex">
        <el-input
          placeholder="请输入搜索内容"
          v-model="searchValue"
          size="mini"
          clearable
        >
        </el-input>
        <div style="display: flex">
          <div class="search-btn btn" @click="btnClick('query')">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </div>
          <div class="search-btn btn" @click="btnClick('reset')">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </div>
        </div>
      </div>
    </div>

    <div class="service-table">
      <el-table
        :data="tableData"
        @row-click="clickTable"
        ref="refTable"
        row-key="id"
        v-loading="tableLoading"
        :default-sort="{ prop: 'ip', order: 'ascending' }"
      >
        <template v-for="{ prop, label } in colConfigs">
          <el-table-column
            v-if="['title', 'ip', 'callCnt'].includes(prop)"
            show-overflow-tooltip
            :key="prop"
            :prop="prop"
            :label="label"
            :align="prop === 'title' ? 'left' : 'center'"
            sortable
          >
          </el-table-column>
          <el-table-column
            v-else
            show-overflow-tooltip
            :key="prop"
            :prop="prop"
            :label="label"
            align="center"
          >
          </el-table-column>
        </template>
      </el-table>

      <div class="table-bom">
        <div class="table-bom-left" style="width: 230px; height: 32px">
          <span style="margin-left: 20px"
            >当前第&nbsp;{{ currentPage }}&nbsp;页，</span
          >
          <span>共&nbsp;</span>
          <span>{{ totalPage }}</span>
          <span>&nbsp;页</span>
        </div>
        <div class="table-bom-right">
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-count="totalPage"
          >
          </el-pagination>
          <div style="margin: auto 0">
            <span>跳至第</span>
            <input
              type="text"
              style="width: 20px; border: none; outline: none"
              v-model="jumpPage"
            />
            <span>页</span>
            <el-button
              size="mini"
              style="padding: 5px 6px; margin-left: 10px"
              @click="confirmJump"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: {
    value: {
      type: Boolean,
    },
    typeServices: {
      type: Number,
      default: () => {
        return 1;
      },
    },
  },
  data() {
    return {
      serTabVisible: false,
      searchValue: "",
      queryKey: "", //搜索条件，切页时
      colConfigs: [
        { prop: "title", label: "服务名称" },
        { prop: "remoteAddr", label: "IP" },
        { prop: "type", label: "类型" },
        { prop: "docCount", label: "调用次数" },
        { prop: "succCount", label: "成功次数" },
        { prop: "errorCount", label: "失败次数" },
        { prop: "maxResponseTime", label: "最大响应时间/s" },
        { prop: "avgResponseTime", label: "平均响应时间/s" },
      ],
      currentPage: 1,
      totalPage: 1,
      jumpPage: 1,
      tableAllGroupData: [],
      tableData: [],
      tableLoading: false,
    };
  },
  watch: {
    value(val) {
      this.serTabVisible = val;
    },
    typeServices: {
      handler(type) {
        this.searchValue = "";
        this.queryKey = "";
        this.currentPage = 1;
        this.jumpPage = 1;
        this.getTable(type);
        if (type == 2) {
          this.colConfigs = [
            { prop: "title", label: "应用名称" },
            { prop: "ip", label: "IP" },
            { prop: "type", label: "类型" },
            { prop: "accessCount", label: "调用次数" },
            { prop: "sumCount", label: "服务总数" },
            { prop: "errorCount", label: "服务异常数" },
          ];
        } else {
          this.colConfigs = [
            { prop: "title", label: "服务名称" },
            { prop: "remoteAddr", label: "IP" },
            { prop: "type", label: "类型" },
            { prop: "docCount", label: "调用次数" },
            { prop: "succCount", label: "成功次数" },
            { prop: "errorCount", label: "失败次数" },
            { prop: "maxResponseTime", label: "最大响应时间/s" },
            { prop: "avgResponseTime", label: "平均响应时间/s" },
          ];
        }
      },
      // immediate: true,
    },
  },
  created() {
    this.getTable(this.typeServices);
    this.showDemo();
  },
  mounted() {
    console.log('rr',this.$route)
  },
  methods: {
    // 展示使用
    async showDemo() {
      const resultDemo = await axios.get("/geoplat/log/getServices");
      let table = resultDemo.data.data.productList;
      let newTable = table.map(item=>{
        item.isSuccess=item.isSuccess?'成功':'失败'
        return item
      })
      console.log("resultDemo", resultDemo);
      console.log("newTable", newTable);
    },
    btnClick(type) {
      if (type === "query") {
        this.queryKey = JSON.parse(JSON.stringify(this.searchValue));
        this.getTable(this.typeServices, this.queryKey);
      } else if (type === "reset") {
        this.searchValue = "";
        this.queryKey = "";
        this.currentPage = 1;
        this.jumpPage = 1;
        this.getTable(this.typeServices, this.queryKey);
      } else if (type === "back") {
        this.serTabVisible = false;
        this.$emit("input", false);
      }
    },

    getTable(type, queryKey) {
      this.tableLoading = true;
      let params = new FormData();
      params.append("pageSize", 10);
      params.append("pageNum", this.currentPage);
      if (type === 0 || type === 1) {
        params.append("type", type);
        if (queryKey) {
          params.append("title", queryKey);
        }
        this.getService(params);
        console.log("ppp", params);
      } else if (type === 2) {
        if (queryKey) {
          params.append("name", queryKey);
        }
        this.getApplicationTable(params);
      }
    },
    // 获取应用访问量
    getApplicationTable(params) {
      axios
        .post("/geoplat/application/getApplicationByAccessCount1", params)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableLoading = false;

            this.tableAllData = res.data.data.productList;
            this.totalPage = res.data.data.totalPage;
            this.appTableDataHandle();
          } else {
            this.tableLoading = false;
            this.$message.error("获取数据失败");
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error("获取数据失败");
          console.log(err);
        });
    },
    // 获取地图服务和功能服务
    getService(params) {
      console.log("result----");
      // const result1 = await axios.post("/geoplat/log/getIpCountByName/");
      // console.log("result3", result1);
      axios.post("/geoplat/log/getIpCountByName", params).then((res) => {
        console.log("wewe", res);
        if (res.data.status === 200) {
          this.tableLoading = false;
          this.tableAllData = res.data.data.productList;
          this.totalPage = res.data.data.totalPage;
          this.tableDataHandle();
        } else {
          this.tableLoading = false;
          this.$message.error("获取数据失败");
        }
      });
    },
    // 处理表格数据
    // 应用访问量数据
    appTableDataHandle() {
      this.tableData = [];
      this.tableAllData.forEach((item) => {
        let newItem = {
          id: item.id,
          title: item.name,
          type: item.isOneMap ? "一张图应用" : "普通应用",
          accessCount: item.accessCount,
          sumCount: item.sumCount,
          errorCount: item.errorCount,
        };
        if (item.mapApplicationIp) {
          item.mapApplicationIp.forEach((i) => {
            let child = i;
            child.title = newItem.title;
            child.type = newItem.type;
            child.accessCount = i.count;
            if (!newItem.children) {
              newItem.children = [];
            }

            newItem.children.push(child);
          });
        }
        this.tableData.push(newItem);
      });
    },

    // 地图和功能服务数据
    tableDataHandle() {
      this.tableData = [];
      this.tableAllData.forEach((item) => {
        // 小数截位
        item.esLayerInfo.forEach((info) => {
          info.type = item.type;
          info.title = item.title;
          info.maxResponseTime = info.maxResponseTime.toFixed(4);
          info.avgResponseTime = info.avgResponseTime.toFixed(4);
        });
        let newItem = JSON.parse(JSON.stringify(item));
        newItem.id = item.id;
        newItem.children = item.esLayerInfo;
        delete newItem.esLayerInfo;
        this.tableData.push(newItem);
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTable(this.typeServices, this.queryKey);
    },
    confirmJump() {
      var numRe = new RegExp(/[\d]/g);
      if (!numRe.test(this.jumpPage)) {
        this.jumpPage = 1;
      }
      this.jumpPage = Number(this.jumpPage);
      this.handleCurrentChange(this.jumpPage);
    },
    // 点击表格行展开
    clickTable(row) {
      this.$refs.refTable.toggleRowExpansion(row);
    },
  },
};
</script>
<style scoped>
.ser-table {
  height: 100%;
}
.search {
  width: 40%;
  margin: 0 10px;
  height: 46px;
  line-height: 46px;
  /* background-color: #fff; */
}
.search-btn {
  width: 80px;
  height: 30px;
  border: 1px solid #2872fe;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  line-height: 46px;
  margin: 7px 0 7px 12px;

  cursor: pointer;
}
.search-btn i {
  line-height: 30px;
  color: #2872fe;
}
.search-btn span {
  display: block;
  line-height: 30px;
  font-size: 14px;
  color: #2872fe;
}
.btn:hover {
  background: #2872fe;
}
.btn:hover i,
.btn:hover span {
  color: #fff !important;
}

/* 表格 */
.service-table {
  margin: 12px;
  background-color: #fff;

  height: calc(100% - 70px);
}
.service-table .el-table {
  height: calc(100% - 32px);
  overflow-y: auto;
}
/* 头 */
.service-table /deep/ th {
  padding: 0px;
  /* background: #ecf4ff; */
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  /* color: #666666; */
}
.service-table /deep/ td {
  padding: 0px;
}

.service-table /deep/ th .cell {
  padding: 0px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #666666;
}
.service-table /deep/ td .cell {
  padding: 8px;
  /* text-align: center; */
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 25px;
}

.table-bom {
  display: flex;
  justify-content: space-between;
  /* padding: 10px 0; */
  font-size: 14px;
}
.table-bom-left span {
  line-height: 32px;
}
.table-bom-right {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}
.service-table /deep/ td:first-child .cell {
  text-align: left !important;
}

/* 隐藏伪元素 */
.service-table /deep/.el-table::before {
  display: none !important;
}
/* 重现下自带下边框线 */
/* .service-table .el-table--border {
  border-bottom: 1px solid #fff!important;
} */
</style>